<template>
	<view class="container">
		<view class="top_box" :style="{'paddingTop':topIconDistance+'px'}">
			<view class="userInfo">
				<view class="info_box" v-if="isLogin" @click="$gourl('/minePage/userInfo')">
					<view class="user_pic">
						<image :src="userInfo.avatar" mode="aspectFill">
						</image>
					</view>
					<view class="text">
						<view class="user_name">
							{{userInfo.nickname}}
						</view>
						<view class="tag_box" v-if="isLogin">
							<view class="tag" v-for="(item,index) in userInfos.type_title" :key="index" v-if="index<3">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="info_box" v-else @click="$gourl('pages/index/login')">
					<view class="user_pic">
						<image mode="aspectFill">
						</image>
					</view>
					<view class="text">
						<view class="user_name">
							未登录，点击登录！
						</view>
						<view class="tag_box" v-if="isLogin">
							<view class="tag" v-for="(item,index) in userInfos.type_title" :key="index" v-if="index<3">
								{item}
							</view>
						</view>
					</view>
				</view>
				<view class="icon_box">
					<!-- <image src="./../../static/images/pMine/sz.png" mode=""></image>
					<image src="./../../static/images/pMine/kf.png" mode=""></image> -->
				</view>
			</view>
			<view class="number">
				<view @click="$gourl('/mallPage/order/orderList?current=1')">
					<view class="big">{{userInfo?userInfo.orderStatusNoSum:0}}</view>
					<view class="small">待支付</view>
				</view>
				<view @click="$gourl('/minePage/myTicket')">
					<view class="big">{{userInfo?userInfo.couponCount:0}}张</view>
					<view class="small">优惠券</view>
				</view>
				<view>
					<view class="big">{{userInfo?userInfo.orderStatusSum:0}}</view>
					<view class="small">我的消费（元）</view>
				</view>
			</view>
		</view>
		<view class="my_order">
			<view class="title">
				<view class="big">我的订单</view>
				<view class="small" @click="$gourl('/mallPage/order/orderList')">全部订单 <u-icon name="arrow-right"
						color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="icon_box">
				<view class="boxs" @click="$gourl('/mallPage/order/orderList?current=1')">
					<view class="nums" v-if="userInfo.orderStatusNum.unpaid_count>0">
						{{userInfo.orderStatusNum.unpaid_count}}
					</view>
					<view class="icon">
						<image src="@/static/images/pMine/yxd.png" mode="heightFix"></image>
					</view>
					<view class="name">待付款</view>
				</view>
				<view class="boxs" @click="$gourl('/mallPage/order/orderList?current=2')">
					<view class="icon">
						<image src="@/static/images/pMine/dfh.png" mode="heightFix"></image>
					</view>
					<view class="name">待配送</view>
					<view class="nums" v-if="userInfo.orderStatusNum.unshipped_count>0">
						{{userInfo.orderStatusNum.unshipped_count}}
					</view>
				</view>
				<view class="boxs" @click="$gourl('/mallPage/order/orderList?current=3')">
					<view class="icon">
						<image src="@/static/images/pMine/dsh.png" mode="heightFix"></image>
					</view>
					<view class="name">配送中</view>
					<view class="nums" v-if="userInfo.orderStatusNum.received_count>0">
						{{userInfo.orderStatusNum.received_count}}
					</view>
				</view>
				<view class="boxs" @click="$gourl('/mallPage/afterSales/salesList')">
					<view class="icon">
						<image src="@/static/images/pMine/sh.png" mode="heightFix"></image>
					</view>
					<view class="name">售后</view>
					<view class="nums" v-if="userInfo.orderStatusNum.complete_count>0">
						{{userInfo.orderStatusNum.unpaid_count}}
					</view>
				</view>
				<view class="boxs" @click="$gourl('/mallPage/order/orderList?current=4')">
					<view class="icon">
						<image src="@/static/images/pMine/ywc.png" mode="heightFix"></image>
					</view>
					<view class="name">已完成</view>
					<view class="nums" v-if="userInfo.orderStatusNum.complete_count>0">
						{{userInfo.orderStatusNum.complete_count}}
					</view>
				</view>
			</view>
		</view>
		<view class="option_box">
			<view class="title">功能服务</view>
			<view class="option">
				<view class="list_box" @click="$gourl('/minePage/ticketList')">
					<view class="icon_box">
						<image src="@/static/images/pMine/lqzx.png" mode=""></image>
					</view>
					<view class="name">领券中心</view>
				</view>
				<view class="list_box" @click="$gourl('/otherPage/invoice/invoiceCenter')">
					<view class="icon_box">
						<image src="@/static/images/pMine/fpzx.png" mode=""></image>
					</view>
					<view class="name">发票中心</view>
				</view>
				<view class="list_box" @click="$gourl('/mallPage/address/addressList')">
					<view class="icon_box">
						<image src="@/static/images/pMine/dzgl.png" mode=""></image>
					</view>
					<view class="name">地址管理</view>
				</view>
				<view class="list_box" @click="$gourl('/minePage/saleRule')">
					<view class="icon_box">
						<image src="@/static/images/pMine/shgz.png" mode=""></image>
					</view>
					<view class="name">售后规则</view>
				</view>
				<view class="list_box" @click="playPhone">
					<view class="icon_box">
						<image src="@/static/images/pMine/kfdh.png" mode=""></image>
					</view>
					<view class="name">客服电话</view>
				</view>
				<view class="list_box" @click="$gourl('/riderMine/renzheng')">
					<view class="icon_box">
						<image src="@/static/images/pMine/zhrz.png" mode=""></image>
					</view>
					<view class="name">骑手认证</view>
				</view>
				<button class="kfButton list_box" open-type="contact" bindcontact="handleContact"
					session-from="sessionFrom">
					<view class="icon_box">
						<image src="@/static/images/pMine/zxkf.png" mode=""></image>
					</view>
					<view class="name">在线客服</view>
				</button>
				<view class="list_box" @click="$gourl('/minePage/feedback')">
					<view class="icon_box">
						<image src="@/static/images/pMine/jyfk.png" mode=""></image>
					</view>
					<view class="name">建议反馈</view>
				</view>
				<view class="list_box" @click="$gourl('/minePage/userInfo')">
					<view class="icon_box">
						<image src="@/static/images/pMine/wdcp.png" mode=""></image>
					</view>
					<view class="name">个人信息</view>
				</view>
				<view class="list_box" @click="$gourl('/riderMine/myQRCode')">
					<view class="icon_box">
						<image src="@/static/images/pMine/yqm.png" mode=""></image>
					</view>
					<view class="name">我的二维码</view>
				</view>
				<view class="list_box" @click="$gourl('/riderMine/promotion')">
					<view class="icon_box">
						<image src="@/static/images/pMine/tg.png" mode=""></image>
					</view>
					<view class="name">我的推广</view>
				</view>
				<view class="list_box" @click="$gourl('/riderMine/income?type=1')">
					<view class="icon_box">
						<image src="@/static/images/pMine/sy.png" mode=""></image>
					</view>
					<view class="name">收益记录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isLogin: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			userInfo: {
				type: Object,
				default: function() {
					return null;
				}
			},
		},
		data() {
			return {
				topIconDistance: 0,
				userInfos: null,
				kf_phone: '',
				isRenzheng: false,
			}
		},
		created() {
			console.log(this.userInfo);
			console.log(this.isLogin);
			uni.getSystemInfo({
				success: (res) => {
					// 获取手机顶部状态栏的高度
					const statusBarHeight = res.statusBarHeight || 0;
					// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) *
						2;
					// 计算顶部图标距离
					this.topIconDistance = statusBarHeight + navBarHeight;
					// 打印顶部图标距离
				},
				fail: (err) => {
					console.error('获取系统信息失败:', err);
				},
			});
			this.getBlock()
		},
		methods: {
			goAddGoods() {
				if (!this.isRenzheng) {
					uni.showModal({
						title: '提示',
						content: '完成认证之后才能上传商品，是否前往认证',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/minePage/attestation',
									animationType: 'slide-in-right',
									animationDuration: 300
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					this.$gourl('/minePage/product/productList')
				}
			},
			playPhone() {
				uni.makePhoneCall({
					phoneNumber: this.kf_phone, // 电话号码
					success: function() {
						console.log('拨号成功');
					},
					fail: function() {
						console.log('拨号失败');
					}
				});
			},
			getBlock() {
				this.$allApi.getBlockInfo({
					type: 'phone'
				}).then(res => {
					console.log(res);
					this.kf_phone = res.data.data
				})
			},
			getData() {
				this.$allApi.getUserInfo().then(res => {
					console.log(res.data);
					this.userInfo = res.data
					// this.userInfos = res.data.user.
					// if (res.data.user.type_title.length > 0) {
					// 	this.isRenzheng = true
					// }
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.option_box {
		width: 710rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 60rpx;

		.option {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			font-size: 20rpx;

			.list_box {
				text-align: center;
				width: 20%;
				padding-top: 40rpx;
				padding-bottom: 20rpx;
				color: #666;

				.icon_box {
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
				}
			}

			.kfButton {
				border: none !important;
				background: none !important;
				padding-left: 0 !important;
				padding-right: 0 !important;
				font-size: 20rpx !important;
				margin: 0 !important;
				line-height: normal !important;
			}

			button::after {
				border-radius: 0;
				border: 0;
			}
		}

		.title {
			font-size: 32rpx;
		}
	}

	.my_order {
		width: 710rpx;
		position: relative;
		z-index: 9;
		margin: 0 auto;
		margin-top: -110rpx;
		background: #fff;
		border-radius: 20rpx;
		height: 274rpx;

		.icon_box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.boxs {
				text-align: center;
				position: relative;
				width: 20%;
				position: relative;

				.nums {
					position: absolute;
					background: #EA3D37;
					color: #fff;
					width: 30rpx;
					height: 30rpx;
					top: 0;
					right: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 20rpx;
					font-size: 20rpx;
				}

				.icon {
					text-align: center;

					image {
						width: 52rpx;
						height: 52rpx;
					}
				}

				.name {
					color: #666;
				}

				.num {
					padding: 6rpx 10rpx;
					font-size: 18rpx;
					color: #fff;
					border-radius: 20rpx;
					background: #F55726;
					position: absolute;
					top: -10rpx;
					right: 20rpx;
				}
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			padding-bottom: 50rpx;

			.big {
				font-size: 32rpx;
			}

			.small {
				font-size: 28rpx;
				color: #999;
			}
		}
	}

	.top_box {
		height: 564rpx;
		position: relative;
		z-index: 1;

		.number {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;

			.big {
				font-size: 36rpx;
				color: #fff;
			}

			.small {
				font-size: 24rpx;
				color: #fff;
			}
		}

		.userInfo {
			display: flex;
			justify-content: space-between;
			width: 100vw;
			padding: 30rpx;
			padding-top: 20rpx;

			.icon_box {
				display: flex;
				justify-content: space-between;

				image {
					width: 48rpx;
					margin-left: 20rpx;
					height: 48rpx;
				}
			}

			.info_box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}

				.text {
					padding-left: 30rpx;

					.user_name {
						font-size: 32rpx;
						color: #fff;
					}

					.tag_box {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-top: 20rpx;
						height: 36rpx;

						.tag {
							width: 80rpx;
							height: 34rpx;
							border-radius: 8rpx;
							color: #5CB746;
							background: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							margin-right: 10rpx;
						}
					}
				}


			}
		}
	}

	.top_box:before {
		content: '';
		position: absolute;
		top: 0;
		left: -50%;
		width: 200%;
		height: 100%;
		z-index: -1;
		background-color: #EA3D37;
		/* 背景颜色 */
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	.container {
		width: 100vw;
		overflow-x: hidden;
		min-height: 100vh;
		background: #F8F8F8;
	}
</style>